import { useColorScheme } from "@/hooks/useColorScheme";
import { Provider } from "@ant-design/react-native";
import {
  DarkTheme,
  DefaultTheme,
  ThemeProvider,
} from "@react-navigation/native";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { StatusBar } from "expo-status-bar";
import { useEffect } from "react";
import { View } from "react-native";
import "react-native-reanimated";
import {
  SafeAreaProvider,
  useSafeAreaInsets,
} from "react-native-safe-area-context";
// 防止启动页自动消失
SplashScreen.preventAutoHideAsync();
export default function RootLayout() {
  useEffect(() => {
    // 模拟数据加载（如请求接口、初始化数据）
    const prepare = async () => {
      try {
        await new Promise((resolve) => setTimeout(resolve, 500)); // 延迟 1 秒
      } finally {
        // 加载完成后隐藏启动页;
        await SplashScreen.hideAsync();
      }
    };
    prepare();
  }, []);
  const colorScheme = useColorScheme();
  const insets = useSafeAreaInsets();
  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });
  // 加载 UI 库的字体 -- Ant Design Mobile RN
  const [fontsLoaded] = useFonts({
    antoutline: require("@ant-design/icons-react-native/fonts/antoutline.ttf"),
  });
  if (!fontsLoaded) {
    return null;
  }
  if (!loaded) {
    // Async font loading only occurs in development.
    return null;
  }
  return (
    <SafeAreaProvider>
      <View
        style={{
          flex: 1,
          paddingTop: insets.top, // 顶部安全区域
          paddingBottom: insets.bottom, // 底部安全区域
        }}
      >
        <Provider>
          <ThemeProvider
            value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
          >
            <Stack>
              {/* 第一个Stack.Screen即首页 */}
              <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
              <Stack.Screen
                name="articleDetail"
                options={{ headerShown: false }}
              />
              <Stack.Screen
                name="searchGoods"
                options={{
                  headerShown: false,
                  presentation: "transparentModal",
                }}
              />
              <Stack.Screen name="login" options={{ headerShown: false }} />
              <Stack.Screen name="+not-found" />
            </Stack>
            <StatusBar style="auto" />
          </ThemeProvider>
        </Provider>
      </View>
    </SafeAreaProvider>
  );
}
